<!-- index.vue -->
<template>
  <div>
    <h1>Welcome to the TodoList Page</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo"/>
    <el-button @click="testCell(10)">值：{{ cellValue }}</el-button>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="toggleTodo(todo.id)">{{ todo.completed ? 'Undo' : 'Complete' }}</button>
        <button @click="deleteTodo(todo.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, onMounted} from 'vue';
import {invoke} from '@tauri-apps/api/core';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

export default defineComponent({
  name: 'TodoList',
  setup() {
    const newTodo = ref('');
    const todos = ref<Todo[]>([]);
    const cellValue = ref(0);


    const addTodo = async () => {
      if (newTodo.value.trim()) {
        await invoke('add_todo', {text: newTodo.value});
        newTodo.value = '';
        fetchTodos();
      }
    };

    const toggleTodo = async (id: number) => {
      await invoke('toggle_todo', {id});
      fetchTodos();
    };

    const deleteTodo = async (id: number) => {
      await invoke('delete_todo', {id});
      fetchTodos();
    };

    const fetchTodos = async () => {
      todos.value = await invoke<Todo[]>('get_todos');
    };

    const testCell = async (value: number) => {
      cellValue.value = await invoke<number>('test_cell', {value});
      console.log(cellValue);
    };

    onMounted(fetchTodos);

    return {
      newTodo,
      todos,
      cellValue,
      addTodo,
      toggleTodo,
      deleteTodo,
      testCell,
    };
  },
});
</script>

<style>
.completed {
  text-decoration: line-through;
}
</style>
   